<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">

<head>
    <title>通知管理</title>
</head>

<body>
<div layout:fragment="content">
    <div class="mt-4">
        <!-- 消息提示 -->
        <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
        <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

        <!-- 新增通知按钮 -->
        <form th:action="@{/api/notices/new}" method="post"
              th:if="${session.user.hasRole(4) || session.user.hasRole(8)}">
            <button type="submit" class="btn btn-sm btn-info mb-3">发布新通知</button>
        </form>

        <table class="table table-hover">
            <thead class="table-dark">
            <tr>
                <th>标题</th>
                <th>内容</th>
                <th>发布时间</th>
                <th>阅读状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="notice : ${notices}">
                <!-- 通知基本信息 -->
                <td th:text="${notice.title}"></td>
                <td th:text="${#strings.abbreviate(notice.content, 30)}"></td>
                <td th:text="${#temporals.format(notice.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</td>

                <!-- 阅读状态 -->
                <td>
                    <form th:action="@{/api/notices/markRead}" method="post" class="d-inline">
                        <input type="hidden" name="nid" th:value="${notice.id}">

                        <button type="submit" class="btn btn-sm"
                                th:classappend="${(noticeStatus[notice.id] ?: false)} ? 'btn-success' : 'btn-outline-secondary'">
                            <span th:if="${noticeStatus.containsKey(notice.id) and noticeStatus[notice.id]}">✓ 已读</span>
                            <span th:unless="${noticeStatus.containsKey(notice.id) and noticeStatus[notice.id]}">× 未读</span>
                        </button>
                    </form>
                </td>

                <!-- 操作按钮 -->
                <td>
                    <form th:action="@{/api/notices/detail}" method="post" class="d-inline">
                        <input type="hidden" name="nid" th:value="${notice.id}">
                        <button type="submit" class="btn btn-sm btn-info">详情</button>
                    </form>

                    <form th:action="@{/api/notices/edit}" method="post" class="d-inline"
                          th:if="${session.user.hasRole(4) || session.user.hasRole(8)}">
                        <input type="hidden" name="nid" th:value="${notice.id}">
                        <button type="submit" class="btn btn-sm btn-warning">编辑</button>
                    </form>

                    <form th:action="@{/api/notices/delete}" method="post" class="d-inline"
                          th:if="${session.user.hasRole(4) || session.user.hasRole(8)}">
                        <input type="hidden" name="nid" th:value="${notice.id}">
                        <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('确定删除该通知吗？')">删除</button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>